<template>
  <!-- 画矩形 -->
  <div class="form">
    <div class="inputBox">
      <label for="">x</label>
      <input type="text" v-model="x" />
    </div>
    <div class="inputBox">
      <label for="">y</label>
      <input type="text" v-model="y" />
    </div>
    <div class="inputBox">
      <label for="">width</label>
      <input type="text" v-model="width" />
    </div>
    <div class="inputBox">
      <label for="">height</label>
      <input type="text" v-model="height" />
    </div>
    <div class="inputBox">
      <label for="">fill</label>
      <input type="color" name="" id="" v-model="fill" />
    </div>
    <div class="inputBox">
      <label for="">strokeColor</label>
      <input type="color" name="" id="" v-model="stroke" />
    </div>
    <div class="inputBox">
      <label for="">strokeWidth</label>
      <input type="text" name="" v-model="strokeWidth" />
    </div>
    <div class="inputBox">
      <button @click="addRect">addRect</button>
    </div>
  </div>
</template>
<script>
import { reactive, toRaw, toRefs } from "vue";
import * as d3 from "d3";
import { rectDrawAdd } from "../../util/geoDrawAdd.js";

export default {
  setup() {
    const rect = reactive({
      x: 44,
      y: 44,
      width: 444,
      height: 444,
      fill: "#e74c3c",
      stroke: "#1abc9c",
      strokeWidth: 2,
    });

    function addRect() {
      const geo = {};
      Object.assign(geo, toRaw(rect));
      rectDrawAdd(geo);
    }

    return { ...toRefs(rect), addRect };
  },
};
</script>
